.title {
  width: 100%;
  height: 100rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
  display: flex;
  justify-content: center;

  .van-hairline--surround {
    text-align: center;
    line-height: 60rpx;
    padding: 20rpx;
    background-color: #9be4f2;
    border-radius: 20rpx;
    width: 200rpx;
    height: 60rpx;
  }

}

.action {

  .write {
    padding: 20rpx;
    box-sizing: border-box;
    margin: 0 5%;
    width: 90%;
    border: 1px solid black;
    border-radius: 20rpx;

    .love {
      background-color: #9be4f2;
      margin-left: 30rpx;

    }

    .upload {
      margin-left: 30rpx;
    }

    .img-list {
      display: flex;
      margin-top: 20rpx;
    }

    .item_img {
      width: 200rpx;
      height: 200rpx;
      display: flex;
      position: relative;

      .del {
        width: 20rpx;
        height: 20rpx;
        position: absolute;
        right: 10rpx;
      }

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .btn {
    padding: 30rpx 40rpx;

    button {
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 20rpx;
      background-color: #9be4f2;
    }
  }
}

.content {
  .lists {
    .love_item {
      padding: 20rpx 40rpx;

      // margin-bottom: 40rpx;
      .content {
        background-color: #fff;
        width: 100%;
        padding: 20rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        border-radius: 20rpx;
        border: 1px solid #ccc;

        .top {
          padding: 10rpx;
          width: 100rpx;
          margin-bottom: 30rpx;
          background-color: #9be4f2;
        }

        .center {
          margin-bottom: 20rpx;
          color: #3ed1ee;
          font-size: 40rpx;
        }

        .info {
          font-size: 32rpx;
          word-break: break-all;

          image {
            width: 200rpx;
            height: 200rpx;
          }
        }
      }

      >.bottom {
        margin-top: 15rpx;
        display: flex;
        justify-content: space-between;

        .comment-count {
          margin-right: 20rpx;

        }

        .comment {
          .comment-list {
            height: 750rpx;
            overflow-y: scroll;

            .comment-item {
              padding: 40rpx;
              display: flex;

              .left {
                image {
                  padding: 20rpx 30rpx 10rpx 10rpx;
                  width: 80rpx;
                  height: 80rpx;
                  border-radius: 50%;
                }
              }

              .right {
                width: 100%;
                display: flex;
                flex-direction: column;
                .folding{
                  width: auto;
                  .van-cell{
                    display: flex  !important;
                    width: auto !important;
                    justify-content: flex-start  !important;
                  }
                  .van-cell__title{
                   flex: none;
                  }
                }
               
                text {
                  color: "#9be4f2";
                }

                .bottom {
                  display: flex;
                  .bottom-left,
                  .jubao {
                    margin-right: 20rpx;
                  }

                }

              }
            }
          }
        }

        .footer {
          bottom: 0;
          display: flex;
          border-top: 1px solid #ccc;
          padding: 30rpx 0;

          .van-field__control {
            flex-grow: 1;
            color: black;
            padding: 0 20rpx;
            width: 600rpx;
            height: 80rpx;
            border-radius: 20rpx;
            background-color: #f0f0f0;

            .van-field__placeholder {
              color: #000 !important;
            }
          }
        }

        .right {
          display: flex;
        }
      }
    }
  }
}

.van-icon.active {}

.van-transition {
  opacity: .2 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}